<template>
  <div class="custom-made">
    <div class="heading">
      <div class="title">为你定制</div>
      <div class="info">您的专属课程及服务来了</div>
    </div>

    <div class="tag-group">
      <div
        v-for="(item, index) in tags"
        :key="index"
        :class="['tag', curr === item.id && 'active']"
        @click="onSelect(item)"
      >{{ item.name }}</div>
    </div>

    <div class="content">
      <div class="reason">
        <div class="reason-tag">
          <span>
            <div>入选</div>
            <div>理由</div>
          </span>
        </div>
        <div class="delta"></div>

        <div class="info">{{ reasonInfo.content }}</div>
      </div>

      <div class="article">
        <row-image
          v-for="item in articles"
          :key="item.id"
          :style="{ margin: 0 }"
          :border="false"
          :title="item.title"
          :desc="item.type"
          :cover="item.cover"
          :star="Number(item.star)"
          :read="item.read"
        />
      </div>

      <div class="more">
        <div class="button">查看更多</div>
      </div>
    </div>

    <div class="hot">
      <div class="hot-heading">
        <div>
          <div class="icon">
            <img src />
          </div>
          <div class="title">热门资讯</div>
        </div>
        <div class="arrow">
          <van-icon name="arrow" color="#999999" size="20" />
        </div>
      </div>

      <div class="hot-content">
        <div class="info-item blue">
          <div>
            <div class="info-title">发现每日职业新动态</div>
            <div class="info-desc">专业人士解读行业机会</div>
          </div>
          <div class="info-action">立即围观</div>
        </div>

        <div class="info-item green">
          <div>
            <div class="info-title">发现每日职业新动态</div>
            <div class="info-desc">专业人士解读行业机会</div>
          </div>
          <div class="info-action">立即围观</div>
        </div>

        <div class="info-item yellow">
          <div>
            <div class="info-title">发现每日职业新动态</div>
            <div class="info-desc">专业人士解读行业机会</div>
          </div>
          <div class="info-action">立即围观</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
import RowImage from '@/components/Product/RowImage'

Vue.use(Icon)

const tags = [
  { id: 0, name: '简历宝典' },
  { id: 1, name: '会计金融' },
  { id: 2, name: '5G' },
  { id: 3, name: '物联网' },
  { id: 4, name: '移民留学' },
  { id: 5, name: '人工智能' }
]

Object.freeze(tags)

export default {
  components: {
    RowImage
  },

  data() {
    return {
      curr: -1,
      reasonInfo: {
        content: '未来将是人工智能的世界，做好充足准备，自信拥抱未来。'
      },
      articles: [
        {
          id: 0,
          cover: '',
          title: '手把手教你修改简历：基础篇',
          read: '3.8',
          star: '4',
          type: '就业 ｜ 应届'
        },
        {
          id: 1,
          cover: '',
          title: 'python量化交易入门',
          read: '3.8',
          star: '4',
          type: '就业 ｜ 应届'
        }
      ],
      tags
    }
  },

  methods: {
    onSelect(e) {
      const { id } = e
      this.curr = this.curr === id ? -1 : id
    }
  }
}
</script>

<style lang="less" scoped>
.custom-made {
  .heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 17px;

    .title {
      font-size: 18px;
      color: #222222;
      font-weight: 500;
    }

    .info {
      font-size: 13px;
      color: #999999;
    }
  }

  .tag-group {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0 12px;

    .tag {
      padding: 5px 12px;
      border-radius: 5px;
      background-color: #e9e9e9;
      color: #444444;
      font-size: 14px;
      font-weight: 300;
      margin: 5px 8px;
      transition: 300ms;
    }

    .active {
      font-weight: normal;
      background-color: #4586ff;
      color: #ffffff;
    }
  }

  .content {
    background-color: #ffffff;
    margin: 0 17px;
    margin-top: 15px;
    padding: 17px 13px;
    border-radius: 5px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);

    .reason {
      background-color: #eef2f9;
      border-radius: 5px;
      align-items: center;
      display: flex;
      position: relative;
      padding: 18.5px 20px;
      justify-content: flex-end;

      .reason-tag {
        position: absolute;
        left: 13.5px;
        top: -3px;
        width: 35px;
        height: 52.5px;
        background-color: #ec5431;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        text-align: center;
        color: #ffffff;

        span {
          font-size: 10px;
          margin-top: 5px;
        }
      }

      .delta {
        position: absolute;
        left: 15px;
        top: 43.5px;
        width: 0;
        height: 0;
        border-left: 17px solid transparent;
        border-right: 17px solid transparent;
        border-bottom: 6px solid #eef2f9;
      }

      .info {
        line-height: 16.5px;
        font-size: 12px;
        color: #999999;
        width: 228px;
      }
    }

    .article {
      margin-top: 16px;
    }

    .more {
      display: flex;
      justify-content: center;
      margin-top: 5.5px;

      .button {
        padding: 5px 22px;
        border-radius: 5px;
        border: 1px solid #3478f6;
        color: #3478f6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
    }
  }

  .hot {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    padding: 0 15px;
    padding-top: 16.5px;
    padding-bottom: 22.5px;
    margin: 0 17px;
    margin-top: 20px;

    .hot-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        display: flex;
        align-items: center;
      }

      .icon {
        margin-right: 8px;

        img {
          width: 12px;
          height: 16px;
        }
      }

      .title {
        font-size: 18px;
        color: #222222;
        font-weight: 500;
      }
    }

    .hot-content {
      display: flex;
      white-space: nowrap;
      overflow-x: scroll;
      margin-top: 10px;

      .info-item {
        width: calc(100vw - 136px);
        flex: none;
        height: 94px;
        border-radius: 5px;
        margin-right: 10px;
        padding: 18px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .info-title {
          font-size: 18px;
        }

        .info-desc {
          font-size: 14px;
          font-weight: 300;
        }

        .info-action {
          width: 90px;
          height: 30px;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 300;
          color: #ffffff;
          font-size: 14px;
        }
      }

      .blue {
        background: linear-gradient(to right, #e3ecff, #bed1ff);
        .info-title,
        .info-desc {
          color: #4586ff;
        }
        .info-action {
          background: linear-gradient(to right, #74a0ff, #4586ff);
        }
      }

      .green {
        background: linear-gradient(to right, #ddfeed, #9be4bf);
        .info-title,
        .info-desc {
          color: #33AE70;
        }
        .info-action {
          background: linear-gradient(to right, #8FFBC4, #7DE1AE);
        }
      }

      .yellow {
        background: linear-gradient(to right, #fff8e7, #ffeeca);
        .info-title,
        .info-desc {
          color: #FFBB19;
        }
        .info-action {
          background: linear-gradient(to right, #FFD689, #FFB730);
        }
      }
    }
  }
}
</style>